<template>
  <div id="stuCourseTeacher">
    <div class="stuFun">
      <div class="stuAdd">
        <el-button type="success" @click="scoreDialog = true">添加学生成绩</el-button>
      </div>
      <!-- 添加学生的dialog -->
      <el-dialog title="添加学生成绩" :visible.sync="scoreDialog" width="40%">
        <div class="formBox">
          <el-form :model="form">
            <input v-model="form.id" hidden />
            <el-form-item label="学号" label-width="50px">
              <el-input v-model="form.sno" placeholder="请输入学号" autocomplete="off" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="姓名" label-width="50px">
              <el-input v-model="form.sname" placeholder="请输入姓名" autocomplete="off" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="课程" label-width="50px">
              <el-select style="width:100%;" v-model="form.cname" placeholder="请选择课程" :disabled="isDisabled">
                <el-option label="web应用开发" value="web应用开发"></el-option>
                <el-option label="移动应用开发" value="移动应用开发"></el-option>
                <el-option label="编译原理" value="编译原理"></el-option>
                <el-option label="嵌入式开发" value="嵌入式开发"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="成绩" label-width="50px">
              <el-input v-model="form.score" placeholder="请输入成绩" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelDialog">取 消</el-button>
          <el-button type="primary" @click="addScore">确 定</el-button>
        </div>
      </el-dialog>

      <div class="stuSearch">
        <el-input placeholder="请输入内容" v-model="searchInput">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="按学号查询" value="1"></el-option>
            <el-option label="按姓名查询" value="2"></el-option>
            <el-option label="按课程查询" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="searchScore">搜索</el-button>
        </el-input>
      </div>
    </div>
    
    <div>
      <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%" :row-style="{ height: '30px' }" :cell-style="{ padding: '10px' }" stripe>
        <el-table-column prop="sno" align="center" sortable label="学号"></el-table-column>
        <el-table-column prop="sname" align="center" label="姓名"></el-table-column>
        <el-table-column prop="cname" align="center" label="课程名"></el-table-column>
        <el-table-column prop="score" align="center" label="成绩"></el-table-column>
        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="modScore(scope.row)" type="success" size="mini">修改</el-button>
            <div style="display: inline;margin-left:5px;">
              <el-popconfirm title="确定删除该学生吗？" icon-color="red" @confirm="delScore(scope.row)">
                <el-button type="danger" size="mini" slot="reference">删除</el-button>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top:15px;">
        <el-pagination background align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      tableData: [],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10, // 每页的数据条数
      isDisabled:false,  //是否禁用输入框
      searchInput: '',
      select: '1',
      scoreDialog: false,   //添加学生成绩弹框
      form: {
        id:'',
        sno: '',
        sname: '',
        cname: '',
        score: ''
      },
    }
  },
  methods: {
    addScore() {
      if (this.form.sno != '' && this.form.sname != '' && this.form.cname != '' && this.form.score != '') {
        this.$http({
          url: '/webapi/teacher/insertScore',
          method: 'post',
          params: this.form
        }).then(res => {
          if (res.code == 200) {
            this.reload();
            this.$message.success(res.msg);
            this.scoreDialog = false;
            this.isDisabled = false;
          } else {
            this.$message.error(res.msg);
          }
        }).catch(e => {
          this.$message.error(e);
        })
      } else {
        this.$message("请输入所有字段!");
      }
    },
    modScore(row) {
      this.$http.get('/webapi/teacher/getScore/' + row.id).then(res => {
        this.form.id = res.id;
        this.form.sname = res.sname;
        this.form.sno = res.sno;
        this.form.cname = res.cname;
        this.form.score = res.score;
        this.scoreDialog = true;
        this.isDisabled = true;
      }).catch(e => {
        this.$message.error(e.message);
      })
    },
    delScore(row) {
      this.$http({
        url: '/webapi/teacher/delScore',
        method: 'delete',
        params: {
          id: row.id
        }
      }).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.reload();
        }
      }).catch(e => {
        this.$message.error(e.message);
      })
    },
    searchScore() {
      if (this.searchInput == '') {
        this.getScore();
      } else {
        let url = '/webapi/teacher/getSname/';
        if (this.select == 1) { url = '/webapi/teacher/getSno/' }
        else if (this.select == 3) { url = '/webapi/teacher/getCname/' }
        else { }
        this.$http.get(url + this.searchInput).then(res => {
          this.tableData = res.data;
          this.total = res.data.length;
          this.searchInput = '';
        }).catch(e => {
          this.$message.error(e.message);
        })
      }
    },
    cancelDialog() {
      this.scoreDialog = false;
      this.isDisabled = false;
      this.form = {
        id: '',
        sno: '',
        sname: '',
        cname: '',
        score: ''
      }
    },
    getScore() {
      this.$http.get('/webapi/teacher/list').then(res => {
        this.tableData = res.data;
        this.total = res.data.length;
      }).catch(e => { this.$message.error(e); })
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  mounted() {
    this.getScore();
  }
}
</script>

<style>
.stuSearch {
  float: right;
  width: 500px;
}

.el-select {
  width: 118px;
}
</style>